<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO标签演示 -->
    <title>{carefree:config name='site_name' /} - Carefree 标签库完整演示</title>
    {carefree:seo
        title='$config.site_name'
        keywords='$config.site_keywords'
        description='$config.site_description'
        type='website' /}

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 头部样式 */
        .site-header {
            background: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .logo a {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            text-decoration: none;
        }

        .main-nav {
            display: flex;
            gap: 20px;
        }

        .main-nav a {
            color: #666;
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: #007bff;
            background: #e7f3ff;
        }

        .header-search {
            flex: 0 0 300px;
        }

        /* 面包屑 */
        .breadcrumb {
            background: #fff;
            padding: 15px 0;
            margin-bottom: 20px;
        }

        .breadcrumb a {
            color: #007bff;
            text-decoration: none;
        }

        .breadcrumb span {
            color: #666;
        }

        /* 主要布局 */
        .site-content {
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 30px;
            margin: 30px 0;
        }

        .main-content {
            background: #fff;
            border-radius: 8px;
            padding: 30px;
        }

        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* 标题样式 */
        .section-title {
            font-size: 24px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #007bff;
        }

        /* 幻灯片 */
        .slider-section {
            margin-bottom: 30px;
            border-radius: 8px;
            overflow: hidden;
        }

        .slide-item {
            position: relative;
            height: 400px;
            overflow: hidden;
        }

        .slide-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .slide-item h2 {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            font-size: 28px;
        }

        /* 文章网格 */
        .article-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .article-card {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid #e0e0e0;
        }

        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .article-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }

        .article-info {
            padding: 15px;
        }

        .article-info h3 {
            font-size: 16px;
            margin-bottom: 10px;
            color: #333;
        }

        .article-info p {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
            line-height: 1.5;
        }

        .article-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #999;
        }

        .article-card a {
            text-decoration: none;
            color: inherit;
        }

        /* Widget样式 */
        .widget {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .widget h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #333;
        }

        /* 热门文章 */
        .hot-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .hot-item:last-child {
            border-bottom: none;
        }

        .hot-item .rank {
            width: 24px;
            height: 24px;
            background: #007bff;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            flex-shrink: 0;
        }

        .hot-item:nth-child(1) .rank { background: #f44336; }
        .hot-item:nth-child(2) .rank { background: #ff9800; }
        .hot-item:nth-child(3) .rank { background: #ffc107; }

        .hot-item a {
            flex: 1;
            color: #333;
            text-decoration: none;
            font-size: 14px;
        }

        .hot-item a:hover {
            color: #007bff;
        }

        .hot-item .views {
            font-size: 12px;
            color: #999;
        }

        /* 分类列表 */
        .category-item {
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .category-item:last-child {
            border-bottom: none;
        }

        .category-item a {
            display: flex;
            justify-content: space-between;
            color: #333;
            text-decoration: none;
            font-size: 14px;
        }

        .category-item a:hover {
            color: #007bff;
        }

        .category-item span {
            color: #999;
        }

        /* 标签云 */
        .social-share {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .social-share a {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 8px 15px;
            border-radius: 5px;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s;
        }

        .share-wechat { background: #09bb07; color: white; }
        .share-weibo { background: #e6162d; color: white; }
        .share-qq { background: #12b7f5; color: white; }
        .share-twitter { background: #1da1f2; color: white; }
        .share-facebook { background: #1877f2; color: white; }

        .social-share a:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        /* 作者卡片 */
        .author-item {
            display: flex;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .author-item:last-child {
            border-bottom: none;
        }

        .author-item img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }

        .author-info {
            flex: 1;
        }

        .author-info strong {
            display: block;
            font-size: 14px;
            color: #333;
            margin-bottom: 4px;
        }

        .author-info span {
            font-size: 12px;
            color: #999;
        }

        /* 归档列表 */
        .archive-item {
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .archive-item:last-child {
            border-bottom: none;
        }

        .archive-item a {
            display: flex;
            justify-content: space-between;
            color: #333;
            text-decoration: none;
            font-size: 14px;
        }

        .archive-item a:hover {
            color: #007bff;
        }

        /* 友情链接 */
        .links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .links a {
            padding: 6px 12px;
            background: #f5f5f5;
            border-radius: 4px;
            color: #666;
            text-decoration: none;
            font-size: 13px;
            transition: all 0.3s;
        }

        .links a:hover {
            background: #007bff;
            color: white;
        }

        /* 统计 */
        .site-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .stat-item {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .stat-item .label {
            display: block;
            font-size: 12px;
            color: #999;
            margin-bottom: 8px;
        }

        .stat-item .value {
            display: block;
            font-size: 24px;
            font-weight: bold;
            color: #007bff;
        }

        /* 广告位 */
        .ad-banner {
            margin: 20px 0;
            border-radius: 8px;
            overflow: hidden;
        }

        .ad-banner img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 评论 */
        .comment-item {
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .comment-item:last-child {
            border-bottom: none;
        }

        .comment-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .comment-header img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .comment-author {
            font-weight: bold;
            color: #333;
        }

        .comment-time {
            font-size: 12px;
            color: #999;
        }

        .comment-content {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }

        /* 页脚 */
        .site-footer {
            background: #fff;
            margin-top: 50px;
            padding: 30px 0;
            text-align: center;
            color: #666;
            font-size: 14px;
        }

        .site-footer p {
            margin: 5px 0;
        }

        /* 空数据状态 */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #999;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .site-content {
                grid-template-columns: 1fr;
            }

            .header-content {
                flex-direction: column;
                gap: 15px;
            }

            .main-nav {
                flex-wrap: wrap;
            }

            .article-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- ==================== 标签1-2: config + nav ==================== -->
    <header class="site-header">
        <div class="container">
            <div class="header-content">
                <!-- 标签1: config - 网站配置 -->
                <div class="logo">
                    <a href="/">{carefree:config name='site_name' /}</a>
                </div>

                <!-- 标签2: nav - 导航菜单 -->
                <nav class="main-nav">
                    {carefree:nav limit='10' id='nav'}
                        <a href="{$nav.url}" class="{$nav.is_current ? 'active' : ''}">{$nav.name}</a>
                    {/carefree:nav}
                </nav>

                <!-- 标签3: search - 搜索框 -->
                <div class="header-search">
                    {carefree:search action='/search' placeholder='搜索文章、标签、分类...' button='搜索' /}
                </div>
            </div>
        </div>
    </header>

    <!-- ==================== 标签4: breadcrumb - 面包屑 ==================== -->
    <div class="breadcrumb">
        <div class="container">
            {carefree:breadcrumb id='crumb'}
                {if $crumb.url}
                    <a href="{$crumb.url}">{$crumb.name}</a>
                {else}
                    <span>{$crumb.name}</span>
                {/if}
                {if !$crumb.is_last} &gt; {/if}
            {/carefree:breadcrumb}
        </div>
    </div>

    <div class="container">
        <div class="site-content">
            <!-- 主要内容区 -->
            <div class="main-content">
                <!-- ==================== 标签5: slider - 幻灯片 ==================== -->
                <section class="slider-section">
                    {carefree:slider position='home_top' limit='5' id='slide'}
                        <div class="slide-item">
                            <a href="{$slide.link}">
                                <img src="{$slide.image}" alt="{$slide.title}">
                                <h2>{$slide.title}</h2>
                            </a>
                        </div>
                    {/carefree:slider}
                </section>

                <!-- ==================== 标签6: article - 文章列表 ==================== -->
                <section class="articles-section">
                    <h2 class="section-title">最新文章</h2>
                    <div class="article-grid">
                        {carefree:article
                            limit='12'
                            hascover='1'
                            order='create_time desc'
                            empty='<div class="empty-state">暂无文章</div>'
                            id='article'}
                            <article class="article-card">
                                <a href="/article/{$article.id}.html">
                                    <img src="{$article.cover_image}" alt="{$article.title}" loading="lazy">
                                    <div class="article-info">
                                        <h3>{$article.title}</h3>
                                        <p>{$article.summary|substr=0,80}...</p>
                                        <div class="article-meta">
                                            <span class="author">{$article.user.real_name}</span>
                                            <span class="category">{$article.category.name}</span>
                                            <time>{$article.create_time|date='Y-m-d'}</time>
                                        </div>
                                    </div>
                                </a>
                            </article>
                        {/carefree:article}
                    </div>
                </section>

                <!-- ==================== 标签7: ad - 广告位 ==================== -->
                <section class="ad-banner">
                    {carefree:ad position='content_middle' id='ad'}
                        <a href="{$ad.link}" target="_blank">
                            <img src="{$ad.image}" alt="{$ad.title}">
                        </a>
                    {/carefree:ad}
                </section>

                <!-- ==================== 标签8: comment - 评论列表 ==================== -->
                <section class="comments-section">
                    <h2 class="section-title">最新评论</h2>
                    {carefree:comment limit='10' type='latest' empty='<div class="empty-state">暂无评论</div>' id='comment'}
                        <div class="comment-item">
                            <div class="comment-header">
                                <img src="{$comment.avatar}" alt="{$comment.display_name}">
                                <div>
                                    <span class="comment-author">{$comment.display_name}</span>
                                    <span class="comment-time">{$comment.create_time|date='Y-m-d H:i'}</span>
                                </div>
                            </div>
                            <div class="comment-content">{$comment.content}</div>
                        </div>
                    {/carefree:comment}
                </section>

                <!-- ==================== 标签9: share - 社交分享 ==================== -->
                <section>
                    <h2 class="section-title">分享到社交平台</h2>
                    {carefree:share platforms='wechat,weibo,qq,twitter,facebook' style='text' /}
                </section>
            </div>

            <!-- 侧边栏 -->
            <aside class="sidebar">
                <!-- ==================== 标签10: author - 热门作者 ==================== -->
                <div class="widget">
                    <h3>🔥 热门作者</h3>
                    {carefree:author limit='5' orderby='view' id='author'}
                        <div class="author-item">
                            <img src="{$author.avatar}" alt="{$author.display_name}">
                            <div class="author-info">
                                <strong>{$author.display_name}</strong>
                                <span>{$author.article_count} 篇文章 · {$author.total_views} 阅读</span>
                            </div>
                        </div>
                    {/carefree:author}
                </div>

                <!-- ==================== 标签11: article (hot) - 热门文章 ==================== -->
                <div class="widget">
                    <h3>📊 热门文章</h3>
                    {carefree:article flag='hot' limit='5' empty='暂无数据' id='hot'}
                        <div class="hot-item">
                            <span class="rank">{$i}</span>
                            <a href="/article/{$hot.id}.html">{$hot.title}</a>
                            <span class="views">{$hot.view_count}</span>
                        </div>
                    {/carefree:article}
                </div>

                <!-- ==================== 标签12: category - 分类列表 ==================== -->
                <div class="widget">
                    <h3>📁 文章分类</h3>
                    {carefree:category limit='10' empty='暂无分类' id='cat'}
                        <div class="category-item">
                            <a href="/category/{$cat.id}.html">
                                <span>{$cat.name}</span>
                                <span>({$cat.article_count})</span>
                            </a>
                        </div>
                    {/carefree:category}
                </div>

                <!-- ==================== 标签13: tagcloud - 标签云 ==================== -->
                <div class="widget">
                    <h3>🏷️ 热门标签</h3>
                    {carefree:tagcloud limit='30' orderby='count' /}
                </div>

                <!-- ==================== 标签14: archive - 文章归档 ==================== -->
                <div class="widget">
                    <h3>📅 文章归档</h3>
                    {carefree:archive type='month' limit='12' format='Y年m月' id='archive'}
                        <div class="archive-item">
                            <a href="{$archive.url}">
                                <span>{$archive.display_date}</span>
                                <span>({$archive.article_count})</span>
                            </a>
                        </div>
                    {/carefree:archive}
                </div>

                <!-- ==================== 标签15: link - 友情链接 ==================== -->
                <div class="widget">
                    <h3>🔗 友情链接</h3>
                    <div class="links">
                        {carefree:link limit='10' empty='暂无链接' id='link'}
                            <a href="{$link.url}" target="_blank" rel="nofollow">{$link.name}</a>
                        {/carefree:link}
                    </div>
                </div>

                <!-- ==================== 标签16: stats - 网站统计 ==================== -->
                <div class="widget">
                    <h3>📈 网站统计</h3>
                    <div class="site-stats">
                        <div class="stat-item">
                            <span class="label">文章数</span>
                            <span class="value">{carefree:stats type='article' /}</span>
                        </div>
                        <div class="stat-item">
                            <span class="label">分类数</span>
                            <span class="value">{carefree:stats type='category' /}</span>
                        </div>
                        <div class="stat-item">
                            <span class="label">标签数</span>
                            <span class="value">{carefree:stats type='tag' /}</span>
                        </div>
                        <div class="stat-item">
                            <span class="label">总浏览</span>
                            <span class="value">{carefree:stats type='view' /}</span>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </div>

    <!-- ==================== 页脚 ==================== -->
    <footer class="site-footer">
        <div class="container">
            <p>&copy; 2025 {carefree:config name='site_name' /}. All rights reserved.</p>
            <p>Powered by Carefree Tag Library V1.5</p>
            <p>备案号：{carefree:config name='icp' /}</p>
        </div>
    </footer>

    <script>
        // 简单的幻灯片效果
        document.addEventListener('DOMContentLoaded', function() {
            const slides = document.querySelectorAll('.slide-item');
            if (slides.length > 1) {
                let current = 0;
                setInterval(() => {
                    slides[current].style.display = 'none';
                    current = (current + 1) % slides.length;
                    slides[current].style.display = 'block';
                }, 5000);
            }
        });
    </script>
</body>
</html>
